<template>
    <div id="index">
        <titleVue @close="close" :title="title_text"></titleVue>
        <div class="bottom">

            <div id="container">
                <div class="app_top">
                    <div class="myinfo_info">
                        <div style="height: 3.2rem;width: 3.2rem;" @click="uploadheadImg">
                            <img v-if="emp_data.headimgurl" :src="headimgurl" height="100%" width="100%"
                                style="border-radius: 50%;" />
                            <div v-else-if="emp_data.sex == 0" class="headimgurl woman"></div>
                            <div v-else class="headimgurl man"></div>
                        </div>
                        <div style="margin-left:.6rem">
                            <div style="font-size: 1rem;line-height: 1.5;font-weight: bold;">{{ emp_data.name }}</div>
                            <div style="font-size: .8rem;line-height: 1.5;margin-top: .4rem;">账号： <span>{{ emp_data.telNum
                            }}</span></div>
                        </div>
                    </div>
                    <div>
                        <van-tabs v-model="currentTab" @change="() => onLoad(true)" color="#f7ac42" background="#fdefda"
                            :animated="true">
                            <van-tab title="我发布的"></van-tab>
                            <van-tab title="我买到的"></van-tab>
                            <van-tab title="我收藏的"></van-tab>
                        </van-tabs>
                    </div>
                </div>
                <div class="list">
                    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                        <van-list v-if="dataList.length > 0" v-model="loading" :finished="finished" finished-text="没有更多了"
                            @load="onLoad" :error.sync="error" error-text="请求失败,点击查询加载">
                            <van-cell v-for="(item, index) in dataList" :key="item.id" class="card"
                                      :style="(myinfo + 1) % 2 === 0 ? 'margin-left: 0.8rem;' : ''" @click="detailClick(item)">
                                <div style="height: 100%;">
                                    <div class="card_top_img" style="overflow: hidden;">
                                        <img v-if="!item.imgkeys" src="../../assets/img/pro.png" height="100%"
                                            width="100%" />
                                        <img v-else :src="ceph(item.imgkeys.split(',')[0])"  width="100%" />
                                    </div>
                                    <div class="card_content">
                                        <div style="font-weight: bold;">{{ item.name }}</div>
                                        <div style="color:#f9b452;font-weight: bold;">价格 <span>{{ item.sale_price || 0 }}元</span>
                                        </div>

                                        <div class="tag" v-show="currentTab === 0"
                                            :style="item.xiajia_status === '1' ? 'color:#e3e3e3' : ''">
                                            <span style="" @click.stop="proSetting(0, item)">编辑</span>
                                            <span style="margin-left: .4rem;" @click.stop="proSetting(1, item)">下架</span>
                                            <span style="margin-left: .4rem;width: calc(50% - .8rem);"
                                                @click.stop="proSetting(2, item)">交易完成</span>
                                        </div>
                                        <div class="tag" v-show="currentTab !== 0">
                                            <span @click.stop="proSetting(3, item)"
                                                style="float: right;width: 45%;">查看详情</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="isEnd" v-if="item.status === '1'">
                                    <div class="end_text">
                                        交易成功
                                    </div>
                                </div>
                            </van-cell>
                        </van-list>
                        <van-empty v-else description="暂无物品" />
                    </van-pull-refresh>
                </div>

            </div>
            <bottomMenu />
        </div>
        <van-dialog v-model="opeShow" :title="opeTitle[opeIndex]" show-cancel-button :before-close="beforeClose"
            @cancel="subErr = false" @confirm="opeConfirm">

            <div v-if="opeIndex === 1" style="padding: 1.6rem;text-align: center;">
                确认下架该商品吗？
            </div>
            <div v-else-if="opeIndex === 2" style="padding: 1.6rem">
                <van-form validate-trigger="onChange">
                    <van-field label="买家手机号" v-model="buyer.buyer_tel" @focus="focus" placeholder="请输入手机号" />

                </van-form>


            </div>
        </van-dialog>
    </div>
</template>

<script>
import titleVue from '@/appview/common/title.vue';
import bottomMenu from '@/appview/common/bottomMenu.vue';
import util from '@/appview/utils/util';
import { Toast } from 'vant';
export default {
    name: "index",
    components: {
        titleVue,
        bottomMenu
    },
    data() {
        return {
            title_text: "我的交易",
            searchForm: {
                name: null,
            },
            emp_data: JSON.parse(util.getCookie("emp_data")),

            dataList: [
            ],
            loading: false,
            finished: false,
            refreshing: false,
            error: false,
            page: {
                size: 16,
                page: 0
            },
            lastLetter: {},
            query_show: false,
            dept_list: [
            ],
            count: {

            },
            queryList: [
            ],
            currentTab: 0,
            opeShow: false,
            opeIndex: 0,
            opeTitle: {
                1: '',
                2: '交易确认',
            },
            buyer: {},
            currentItem: {},
            subErr: false,

        }
    },

    mounted() {
        this.onLoad();
        window.viewWillAppear = () => {
            this.onLoad(true);
        }
    },
    methods: {
        close() {// 关闭当前窗口
            this.va.close();
        },
        focus() {
            // let from = JSON.parse(util.getCookie("fromtype"))
            // if (from == 0) {
            //     Toast('暂无查看权限')
            // } else if (from == 1) {
            //     this.va.selectContacts(['Enterprise', 'Business']).then((res) => {
            //         if (res.length > 1) {
            //             Toast('只能选择一个人,请重新选择')
            //             res = []
            //         } else if (res.length == 1) {
            //             let item = res[0];
            //             let buyer = {
            //                 name: item.name,
            //                 buyer_tel: item.phone,
            //                 unionid: item.unionid,

            //             };
            //             this.buyer = buyer;

            //         }
            //         console.log('通讯录', res);
            //     });
            // } else if (from == 2) {
            //     this.va.selectContacts(['Business']).then((res) => {
            //         if (res.length > 1) {
            //             Toast('只能选择一个人,请重新选择')
            //             res = []
            //         } else if (res.length == 1) {
            //             let item = res[0];
            //             let buyer = {
            //                 name: item.name,
            //                 buyer_tel: item.phone,
            //                 unionid: item.unionid,

            //             };
            //             this.buyer = buyer;
            //         }
            //         console.log('通讯录', res);
            //     });
            // }

        },
        uploadheadImg() {
            // let file = document.createElement('input');
            // file.type = 'file';
            // file.onchange = function (e) {

            // }
        },
        proSetting(type, item) {
            if (item.xiajia_status === '1') {
                return;
            }
            this.currentItem = item;
            if (type === 0) {
                window.open("#/app/releaseTo?id=" + item.id);
            } else if (type === 3) {
                window.open("#/app/detailPage?id=" + item.id);
            }
            else {
                this.opeIndex = type;
                this.opeShow = true
            }

        },
        onLoad(reload) {

            if (reload || this.refreshing) {
                this.loading = true;
                this.page.page = 0;

            }
            let data = { telType: this.currentTab }
            this.axios.post('app/product/queryMyinfoProductList', data, { params: this.page }).then(({ data: res }) => {
                if (res && res.success) {
                    let list = res.data.content;
                    if (!reload && !this.refreshing) {
                        list = this.dataList.concat(list)
                    }
                    if (list.length < this.page.size) {
                        this.finished = true;
                    }
                    this.page.page++;
                    this.error = false;
                    this.dataList = list;
                } else {
                    this.error = true;
                }

            }).catch(() => {
                this.error = true;
            }).finally(() => {
                this.loading = false;
                if (this.refreshing) {
                    this.refreshing = false;
                }
            })
        },
        async opeConfirm() {

            if (!this.currentItem.id) {
                return;
            }
            this.subErr = false;
            if (this.opeIndex === 1) {
                await this.axios.post(`app/product/upXJStatus/${this.currentItem.id}`).then(({ data: res }) => {
                    if (res && res.success && res.data === 1) {
                        Toast("下架成功");
                        this.onLoad(true)
                    }

                }).catch(() => {
                    Toast("下架失败");
                    this.subErr = false;
                })
            } else if (this.opeIndex === 2) {
                // if (!this.buyer.unionid) {
                //     Toast("请选择买家");
                //     this.subErr = true;
                //     return;
                // }
                if (!this.buyer.buyer_tel || !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.buyer.buyer_tel)) {
                    Toast({
                        message: '请正确填写买家手机号!',
                        position: 'bottom',
                    });
                    this.subErr = true;
                    return;
                }
                await this.axios.post(`app/product/upBuyer/${this.currentItem.id}`, null, { params: this.buyer }).then(({ data: res }) => {
                    if (res && res.success && res.data === 1) {
                        Toast("交易成功");
                        this.onLoad(true)
                    }
                }).catch(() => {
                    Toast("交易失败");
                    this.subErr = false;
                })
            }


        },
        beforeClose(action, done) {
            if (this.subErr) {
                done(false)
            } else {
                this.buyer = {};
                this.currentItem = {};
                done();
            }
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            this.onLoad();
        },
        detailClick(item) {
            //item.zanState = zanState;
            window.open("#/app/detailPage?id=" + item.id);
            //window.detail = item;
        },

    }
};
</script>
<style scoped>
#index {
    height: 100%;
    font-size: 1rem;
}

.bottom {
    height: calc(100% - 2.75rem);
    position: relative;
    overflow: hidden;
    top: -2px;
}

#container {
    height: calc(100% - 3.2rem);

    overflow: hidden;
    width: calc(100% + .4rem);
    background: #ecf8fe;
}

#container .card .card_top_img {
    height: 8.2rem;
}

#container .card .card_content {
    padding: 0 .64rem .4rem;
    font-size: .8rem;
    line-height: 1.2;
}

#container .card .card_content>div {
    margin-top: .6rem;
    /* font-weight: bold; */

}

#container .card .tag {
    color: #000;
    font-size: .8rem;

}

.myinfo_info {
    height: calc(100% - 45px);
    padding: 1.2rem 0 0 1.2rem;
    display: flex;
    color: #000;
}

.headimgurl.woman {
    background-image: url(../../assets/img/woman.jpeg);
}

.headimgurl.man {
    background-image: url(../../assets/img/man.jpeg);
}

.headimgurl {

    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-size: 100% 100%;
}

.app_top>>>.van-tab,
.app_top>>>.van-tab--active {
    font-weight: bold;
    color: #000;

}

#container .card .tag>span {
    display: inline-block;
    height: 1.4rem;
    width: 25%;
    line-height: 1.4rem;
    text-align: center;
    border: 1px solid #edefef;
}

#container .card>div {
    height: 100%;
}

.app_top {
    height: 8rem;
    background: #fdefda;
}








.app_bottom {
    height: 3.2rem;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    font-size: .8rem;
    width: 100%;
    align-items: center;
    text-align: center;
    font-weight: bold;
}

#container .list {
    background: #ecf8fe;
    width: 100%;
    height: calc(100% - 8.8rem);
    margin-top: .8rem;
    padding: 0 1rem 0 .6rem;
    overflow-y: auto;
}

#container .list .card {
    width: calc(50% - .4rem);
    display: inline-block;
    height: 14rem;
    border-radius: .4rem;
    padding: 0;
    position: relative;
}

.bottom .list .vant-list {
    overflow: hidden;
}

.isEnd {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #eabcbc;
    opacity: .8;
    top: 0;
    z-index: 3;
}

.isEnd .end_text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-style: oblique;
}

.list>>>.van-list .van-list__loading::before {
    content: '';
    display: block;
    clear: both;
}

.list>>>.van-list .van-list__error-text::before {
    content: '';
    display: block;
    clear: both;
}

.list>>>.van-list .van-list__finished-text::before {
    content: '';
    display: block;
    clear: both;
}

.list>>>.van-list__error-text,
.list>>>.van-list__finished-text,
.list>>>.van-list__loading {
    font-size: .8rem;
}

.list>>>.van-pull-refresh {
    min-height: 100%;
}</style>
